import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:onlineshop/constants/my_color.dart';
import 'package:onlineshop/model/cart_item.dart';

class CartPage extends StatefulWidget {
  const CartPage({super.key});

  @override
  State<CartPage> createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
// 购物车数据
  final cartList = [
    Cartitem(
        imgPath: 'assets/images/cart/shouti.png',
        name: '手提包皮夹',
        price: 120.00,
        count: 1,
        id: 1),
    Cartitem(
      imgPath: 'assets/images/cart/liuxing.png',
      name: '手提包皮夹',
      price: 120.00,
      count: 1,
      id: 2,
    ),
    Cartitem(
      imgPath: 'assets/images/cart/heise.png',
      name: '手提包皮夹',
      price: 120.00,
      count: 1,
      id: 3,
    ),
    Cartitem(
        imgPath: 'assets/images/cart/shouti.png',
        name: '手提包皮夹',
        price: 120.00,
        count: 1,
        id: 1),
    Cartitem(
      imgPath: 'assets/images/cart/liuxing.png',
      name: '手提包皮夹',
      price: 120.00,
      count: 1,
      id: 2,
    ),
    Cartitem(
      imgPath: 'assets/images/cart/heise.png',
      name: '手提包皮夹',
      price: 120.00,
      count: 1,
      id: 3,
    )
  ];

// 减数量
  void reduceCount(id) {
    setState(() {
      for (var item in cartList) {
        if (item.id == id) {
          if (item.count > 1) {
            item.count--;
            calculateTotalPrice();
          }
        }
      }
    });
  }

  //  添加数量
  void addCount(id) {
    setState(() {
      for (var item in cartList) {
        if (item.id == id) {
          item.count++;
          calculateTotalPrice();
        }
      }
    });
  }

  // 商品总价
  double totalPrice = 0;

  // 计算总价
  void calculateTotalPrice() {
    totalPrice = cartList.fold(
      0,
      (previousValue, element) => previousValue + element.price * element.count,
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    calculateTotalPrice();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          onTap: () => Navigator.pop(context),
          child: const Padding(
            padding: EdgeInsets.only(left: 16),
            child: Icon(Icons.arrow_back),
          ),
        ),
        backgroundColor: const Color(MyColor.BACKGROUND_COLOR),
      ),
      backgroundColor: const Color(MyColor.BACKGROUND_COLOR),
      body: Column(
        children: [
          const SizedBox(
            height: 20,
          ),
          const Align(
            alignment: Alignment.center,
            child: Text(
              "购物车",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 23,
                fontWeight: FontWeight.w700,
                color: Color(MyColor.PRIMARY_COLOR),
              ),
            ),
          ),
          const SizedBox(
            height: 28,
          ),
          Expanded(
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30),
                  topRight: Radius.circular(30),
                ),
              ),
              child: Column(
                children: [
                  SizedBox(
                    height: 450,
                    width: double.infinity,
                    child: ListView(
                      scrollDirection: Axis.vertical,
                      children: cartList
                          .map(
                            (item) => Container(
                              padding: const EdgeInsets.only(
                                left: 30,
                                right: 30,
                                top: 24,
                              ),
                              width: double.infinity,
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    width: 70,
                                    height: 70,
                                    child: Image.asset(item.imgPath),
                                  ),
                                  const SizedBox(
                                    width: 28,
                                  ),
                                  Column(
                                    children: [
                                      Text(
                                        item.name,
                                        style: const TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.w400,
                                        ),
                                      ),
                                      const SizedBox(
                                        height: 7,
                                      ),
                                      Text(
                                        "￥ ${item.price}",
                                        style: TextStyle(
                                          fontSize: 13,
                                          fontWeight: FontWeight.w400,
                                          color:
                                              const Color(MyColor.PRIMARY_COLOR)
                                                  .withOpacity(0.4),
                                        ),
                                      ),
                                    ],
                                  ),
                                  const Expanded(
                                    child: Text(''),
                                  ),
                                  Row(
                                    children: [
                                      GestureDetector(
                                        onTap: () {
                                          reduceCount(item.id);
                                        },
                                        child: const Icon(
                                          Icons.remove,
                                          size: 16,
                                        ),
                                      ),
                                      const SizedBox(
                                        width: 5,
                                      ),
                                      Text(
                                        item.count.toString(),
                                        style: const TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.w400,
                                        ),
                                      ),
                                      const SizedBox(
                                        width: 5,
                                      ),
                                      GestureDetector(
                                        onTap: () {
                                          addCount(item.id);
                                        },
                                        child: const Icon(
                                          Icons.add,
                                          size: 16,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          )
                          .toList(),
                    ),
                  ),
                  const SizedBox(
                    height: 45,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '选定商品 (${cartList.length})',
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text(
                          '总价: $totalPrice',
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const Expanded(
                    child: Text(''),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                      bottom: 25,
                      left: 42,
                      right: 42,
                    ),
                    child: SizedBox(
                      width: double.infinity,
                      height: 54,
                      child: ElevatedButton(
                        onPressed: () {
                          Navigator.pushNamed(context, '/bill');
                        },
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(
                            const Color(MyColor.PRIMARY_COLOR),
                          ),
                          shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(18),
                            ),
                          ),
                        ),
                        child: const Text(
                          '结账',
                          style: TextStyle(
                            color: Color(0xffFFDB8B),
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
